<template>
  <div class="bg">
    <a-card class="login">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="用户名" v-bind="validateInfos.username">
          <a-input
              v-model:value="modelRef.username"
              @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
          />
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password">
          <a-input type="password"
              v-model:value="modelRef.password"
              @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" html-type="submit" :loading="loading" @click.prevent="onSubmit"
                    class="login-form-button">
            登陆
          </a-button>
          <router-link :to="{path:'/retrievePassword'}" class="login-form-forgot"> 找回密码</router-link>
          <router-link :to="{path:'/register'}" style="float: right;"> 没有账号?去注册</router-link>
        </a-form-item>
      </a-form>
    </a-card>

  </div>

</template>

<script>
import {reactive, toRaw, computed, ref, defineComponent} from 'vue';
import {Form, message} from 'ant-design-vue';

const useForm = Form.useForm;
import PmsApi from "@/components/login/js/PmsApi";
import {useRouter} from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const modelRef = reactive({
      username: '',
      password: undefined,
    });
    const rulesRef = reactive({
      username: [
        {
          required: true,
          message: '请输入用户名',
        },
        {
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
        },
      ],
    });
    const {resetFields, validate, validateInfos} = useForm(modelRef, rulesRef);
    const onSubmit = () => {
      loading.value = true;
      validate().then(() => {
        PmsApi.login(modelRef).then(res => {
          localStorage.setItem('token', res.token);
          localStorage.setItem('username', res.username);
          router.push('/home');
          message.success("登陆成功");
          loading.value = false;
        }, msg => {
          message.warning(msg);
          loading.value = false;
        });
        console.log(toRaw(modelRef));
      }).catch(err => {
        console.log('error', err);
      });
    };
    return {
      loading,
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      validate,
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
    };
  },
});
</script>

<style>
.bg {
  background: url('../../assets/bg/huojian.jpg') no-repeat center center fixed;
  height: 100%;
  padding-top: 10%;
  padding-left: 30%;
  padding-right: 30%;
}

.login {
  background-color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin: 0 10% 0 10%;
  overflow: hidden;
  opacity: 0.80;
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

.login-form-button {
  width: 100%;
}

</style>
